<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
	loading: boolean;
	full?: boolean;
}>();

const show = computed(() => props.loading);
</script>

<template>
	<view :class="`spin-container`">
		<wd-overlay :class="`overlay ${props.full && 'overlay_full'}`" :show="show">
			<wd-loading />
		</wd-overlay>

		<div :class="`content ${props.loading && 'content-loading'}`">
			<slot />
		</div>
	</view>
</template>

<style lang="less" scoped>
.spin-container {
	width: 100%;
	height: 100%;
	position: relative;

	.wd-overlay {
		position: absolute;
		width: 110%;
		max-width: 100%;
		height: 110%;
		transform: translateY(-5%);

		background: rgba(255, 255, 255, 0) !important;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overlay_full {
		position: fixed;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	.content {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	.content-loading {
		opacity: 0.5;
	}
}
</style>
